<template>
    <div>
      <div class="top">
        <van-icon @click="goback" class="zuo" name="arrow-left" />
        登录/注册
      </div>
      <div>
        <van-cell-group>
          <van-field v-model="name" label="账号:" placeholder="手机号/账号" />
        </van-cell-group>
        <van-cell-group>
          <van-field
            :type="type"
            clearable
            v-model="password"
            label="密码:"
            placeholder="密码"
            :right-icon="typeIcon"
            @click-right-icon="changeIocn(typeIcon)"
          />
        </van-cell-group>
      </div>
      <p class="red" @click="Reg">点击注册</p>
      <button class="go" @click="Go">登录</button>
      <!-- <div>{{ msg }}</div> -->
    </div>
  </template>
  
  <script>
  import { Toast } from "vant";
  import {goLogin} from '@/api/login'
  export default {
    name: "RegVue",
    data() {
      return {
        name: "",
        password: "",
        // msg: "",
        typeIcon: "closed-eye",
        type:"password"
      };
    },
    methods: {
      goback() {
        this.$router.back();
      },
      Go() {
        console.log("登录");
        goLogin({ loginname: this.name, password: this.password }).then((res) => {
          let data = res.data;
          console.log(data);
          if (data.code == 200) {
            Toast("登陆成功");
            localStorage.setItem("token", data.data.token);
            localStorage.setItem("userid", data.data.userid);
            setTimeout(() => {
              this.goback();
            }, 1000);
          } else if (data.code == 10010) {
            console.log(res);
            Toast("登陆失败,用户名或密码错误");
          } else if (data.code == 10011) {
            console.log(res);
            Toast("登陆失败,用户名或密码错误");
          }
        });
      },
      Reg() {
        this.$router.replace("/Reg1");
      },
      changeIocn(val){
         if(val=="closed-eye"){
          console.log("hhhhh");
          this.type="text";
          this.typeIcon="eye-o";
         }else{
          this.type="password";
          this.typeIcon="closed-eye";
         }
      }
    },
  };
  </script>
  
  <style scoped>
  .top {
    width: 100%;
    height: 3.125rem;
    font-size: 1.25rem;
    text-align: center;
    line-height: 3.125rem;
    /* border-bottom: 0.0625rem solid black; */
    position: relative;
    background-color: red;
  }
  .zuo {
    position: absolute;
    left: 0.625rem;
    font-size: 1.25rem;
    top:1rem;
  }
  .go {
    background-color: rgb(255, 166, 2);
    width: 18.75rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    border: none;
    position: absolute;
    left: 2.5rem;
    top: 12.5rem;
  }
  .red {
    color: red;
    font-size: 0.875rem;
    position: absolute;
    right: 0.3125rem;
  }
  </style>